<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <script src="../../../../libs/layui/layui.js"></script>
        <link rel="stylesheet" href="../../../../libs/layui/css/layui.css" />
        <title>Layui - 菜单示例 (v2.6.8)</title>
    </head>
    <body style="background-color: #f6f6f6;">
        <div class="layui-panel" style="width: 200px;">
            <ul class="layui-menu" id="docDemoMenu1">
                <li lay-options="{id: 100}">
                    <div class="layui-menu-body-title">menu item 1</div>
                </li>
                <li lay-options="{id: 101}">
                    <div class="layui-menu-body-title">
                        <a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
                    </div>
                </li>
                <li class="layui-menu-item-divider"></li>
                <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
                    <div class="layui-menu-body-title">menu item 3 group <i class="layui-icon layui-icon-up"></i></div>
                    <ul>
                        <li lay-options="{id: 1031}">menu item 3-1</li>
                        <li lay-options="{id: 1032}">
                            <div class="layui-menu-body-title">menu item 3-2</div>
                        </li>
                    </ul>
                </li>
                <li class="layui-menu-item-divider"></li>
                <li lay-options="{id: 104}">
                    <div class="layui-menu-body-title">menu item 4</div>
                </li>
                <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
                    <div class="layui-menu-body-title">
                        menu item 5
                        <i class="layui-icon layui-icon-right"></i>
                    </div>
                    <div class="layui-panel layui-menu-body-panel">
                        <ul>
                            <li lay-options="{id: 1051}">
                                <div class="layui-menu-body-title">menu item 5-1</div>
                            </li>
                            <li lay-options="{id: 1051}">
                                <div class="layui-menu-body-title">menu item 5-2</div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li lay-options="{id: 106}">
                    <div class="layui-menu-body-title">menu item 6</div>
                </li>
            </ul>
        </div>

        <script>
            layui.use('dropdown', function () {
                var dropdown = layui.dropdown;
            });
        </script>
    </body>
</html>
